


import React, { useState,useEffect ,useRef } from 'react';
import { Button, Modal, Form, Input, DatePicker, Rate, Select ,Drawer} from 'antd';
import "./Zixun.scss"
import type { DrawerProps, RadioChangeEvent } from 'antd';
import Zixun_List from "../../../components/Response列表/Zixun_list"
import * as service from '../../../api/index'
import { useNavigate } from 'react-router-dom'
import { Selector, Space ,TextArea,Toast} from 'antd-mobile'

interface Props {

}
function Zixun(props: Props) {
  //父组件调用子组件方法
  let childRef=React.createRef()

//子传父
 const [parentCount, setParentCountt] = useState<number>(0);
 
  const getChildCount = (val: number) => {
    setParentCountt(val);
  };

    //抽屉
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState<DrawerProps['placement']>('left');

    const showDrawer = () => {
      setOpen(true);
    };
  
    const onClose = () => {
      setOpen(false);
    };
  
    const onChange = (e: RadioChangeEvent) => {
      setPlacement(e.target.value);
    };

    const options = [
        {
          label: '审批时间比较短',
          value: '审批时间比较短',
        },
        {
          label: '办理速度比较快',
          value: '办理速度比较快',
        },
        {
          label: '申请流程比较清晰',
          value: '申请流程比较清晰',
        },
        {
            label: '情形比较合理',
            value: '情形比较合理',
          },
      ]
    var navigate = useNavigate();
   
    // var set_id=1
    //设置某一条数据
    var [shujv, setShujv]:any = useState({});


    var [idd, setidd]:any = useState({});
    //弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = async (id:any) => {
    setIsModalOpen(true);
      console.log(id)
      setidd(id)
    var res= await service.Zixun_xiangqig({id:id})
    setShujv(res.data)

   console.log(shujv)
 
  };
  var [xuanxiang, setxuanxiang]:any = useState([]);
  const handleOk = async () => {
    console.log(shujv)
    console.log(xuanxiang)
    var time = new Date();
    console.log(time.toLocaleString())
    var PJtime=time.toLocaleString()
    var manyi=""
  
     if(xingji==1){
      manyi="非常不满意"
     }else if(xingji==2){
      manyi="不满意"
     }else if(xingji==3){
      manyi="基本满意"
     }else if(xingji== 4){
      manyi="满意"
     }else if( xingji== 5){
      manyi="非常满意"
     }


     var res = await service.Zixun_update({id:idd,xuanxiang,manyi,textnav,PJtime})
     console.log(res)
    setIsModalOpen(false);
  };


  const handleCancel = () => {
    setIsModalOpen(false);
  };







    const { Option } = Select;
    //父组件调用子组件方法
    var [newarr,setnewarr]:any=useState()

    type SizeType = Parameters<typeof Form>[0]['size'];
    const onFinish =async (values: any) => {
      console.log(values.headline)
       var headline=values.headline
      var res=await service.Zixun_search(headline)
        console.log(res.data)
            setnewarr(res.data)
        // childRef.current.setlist(res.data)





    };
    const { RangePicker } = DatePicker;
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const [form] = Form.useForm();
    const onGenderChange = (value: string) => {
        switch (value) {
            case 'male':
                form.setFieldsValue({ note: 'Hi, man!' });
                break;
            case 'female':
                form.setFieldsValue({ note: 'Hi, lady!' });
                break;
            case 'other':
                form.setFieldsValue({ note: 'Hi there!' });
                break;
            default:
        }
    };
      //跳转添加
      const add=()=>{
        navigate("/Zixunadd")
    }
    //收集评价内容

     var [textnav,settextnav]:any=useState()
    const pingjiatext=(val:string)=>{
      textnav=val
      settextnav(textnav)
      console.log(textnav)
    }
     //收集星级

  var [xingji,setxingji]:any=useState()
  const xingzhi=(val:number)=> {
    Toast.show(val.toString())
        xingji=val
        setxingji(xingji)
        console.log(xingji)
}
    return (
        <div className='Guanli'>
          <div className='biaodan'>
                <Form
                    name="basic"
                    // labelCol={{ span: 8 }}
                    // wrapperCol={{ span: 16 }}
    
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="标题"
                        name="headline"
          
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item name="type" label="类型" >
                        <Select
                            placeholder="请选择"
                            onChange={onGenderChange}
                            allowClear
                        >
                              <Option value="办件">办件</Option>
                            <Option value="账户">账户</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="反馈人姓名"
                        name="name"
               
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item name="state" label="状态" >
                        <Select
                            placeholder="请选择"
                            onChange={onGenderChange}
                            allowClear
                        >
                         <Option value="待回复">待回复</Option>
                            <Option value="已回复">已回复</Option>
                            <Option value="交办中">交办中</Option>
                        </Select>
                    </Form.Item>
                 
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                          查询
                        </Button>
                 
                    </Form.Item>
                </Form>

          </div>
             <div>
             <Button type="primary" onClick={add}>新增</Button>
             {/* onRef={childRef}  */}
               <Zixun_List Ff={showModal}  Newarr={newarr}  />
             </div>
             <Drawer
        title="Basic Drawer"
        placement={placement}
        closable={false}
        onClose={onClose}
        open={open}
        key={placement}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
             <>
  
  <Modal title="评价" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <div><span>标题：</span>{shujv&&shujv.headline}</div>
      <div><span>姓名：</span>{shujv&&shujv.name}</div>
      <div><span>电话：</span>{shujv&&shujv.phone}</div>

    <Selector
      columns={3}
      options={options}
    //   defaultValue={['2', '3']}
      multiple={true}
      onChange={v => {
      xuanxiang = v
      setxuanxiang(v)
      console.log(xuanxiang)
    }}
    />

  <Rate onChange={val =>xingzhi(val)} />
  <div className='text'>
    <TextArea onChange={val => pingjiatext(val)} defaultValue={"写其他建议和意见"} showCount />
  </div>
  </Modal>
</>
        </div>
    );
}

export default Zixun;